<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>icf</title>

	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="/public/layui/admin/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="/public/layui/admin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
	<div class="layui-card">
		<div class="layui-card-header">EShop</div>
		<div class="layui-card-body" style="padding: 15px;">
			<form class="layui-form" action="" lay-filter="component-form-group">
				{% if data.detail.Id %}
				<input name="id" type="hidden" value="{{ data.detail.Id }}"/>
				{% endif %}

				<input name="province" id="province" type="hidden" value="{{data.detail.Province}}" >
				<input name="city" id="city" type="hidden" value="{{data.detail.City}}" >
				<input name="area" id="area" type="hidden" value="{{data.detail.Area}}" >
				<input name="cate_id" id="cate_id" type="hidden" value="{{data.detail.CateId}}" >


				<div class="layui-form-item">
					<label class="layui-form-label">店铺名称</label>
					<div class="layui-input-block">
						<input type="text"
							   id="shop_name"
							   name="shop_name"
							   value="{{ data.detail.ShopName }}"
							   lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">店铺分类</label>
					<div class="layui-input-block">

						<select name="cate_list" id="cate_list" lay-verify="required" lay-search="">

						</select>


					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">联系电话</label>
					<div class="layui-input-block">
						<input type="text"
							   id="mobile"
							   name="mobile"
							   value="{{ data.detail.Mobile }}"
							   lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">所在地</label>
					<div class="layui-input-inline">
						<select lay-filter="province_list" name="province_list" id="province_list">

						</select>
					</div>
					<div class="layui-input-inline">
						<select lay-filter="city_list" name="city_list" id="city_list">
						</select>
					</div>
					<div class="layui-input-inline">
						<select name="area_list" id="area_list">
						</select>
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">地址</label>
					<div class="layui-input-block">
						<input type="text"
							   id="address"
							   name="address"
							   value="{{ data.detail.Address }}"
							   lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
					</div>
				</div>


				<div class="layui-form-item">
					<label class="layui-form-label">营业执照</label>
					<div class="layui-input-block">
						<img src="{{ data.detail.License }}" width="150px" >
					</div>
				</div>

				<div class="layui-form-item layui-layout-admin">
					<div class="layui-input-block">
						<div class="layui-footer" style="left: 0;">
							<button class="layui-btn" lay-submit="" lay-filter="edit-submit">提交</button>
							<a href="javascript:goBack()" class="layui-btn layui-btn-primary">返回</a>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>


<script src="/public/layui/admin/layui/layui.js"></script>
<script>

	layui.config({
		base: '/public/layui/admin/' //静态资源所在路径
	}).extend({
		index: 'lib/index' //主入口模块
	}).use(['index', 'form', 'laydate','jquery','upload'], function(){
		var $ = layui.$
				,admin = layui.admin
				,element = layui.element
				,layer = layui.layer
				,laydate = layui.laydate
				,form = layui.form;

		form.render(null, 'component-form-group');
		laydate.render({
			elem: '#LAY-component-form-group-date'
		});

		/* 自定义验证规则 */
		form.verify({
			title: function(value){
				if(value.length < 0){
					return '请输入';
				}
			}
			,pass: [/(.+){6,12}$/, '密码必须6到12位']
			,content: function(value){
				layedit.sync(editIndex);
			}
		});

		// 文件上传
		var upload = layui.upload;
		upload.render({
			elem: '#upload-drag',
			url: '/admin/upload',
			done: function(res) {
				console.log(res)
				$("#img-upload").attr("src", res.data.imgurl);
				// TODO: $("#prdminipic").val(res.data.imgurl);
			}
		});

		/* 监听提交 */
		form.on('submit(edit-submit)', function(data){
			// parent.layer.alert(JSON.stringify(data.field), {
			//   title: '最终的提交信息'
			// })
			data.field["province"] = $("#province_list").val();
			data.field["city"] = $("#city_list").val();
			data.field["area"] = $("#area_list").val();
			data.field["cate_id"] = $("#cate_list").val();

			$.ajax({
				type: "POST",
				url : "/admin/EShop/editpage",
				data: data.field,
				async: true,
				error: function(request) {
					parent.layer.alert(JSON.stringify(request), {title: '操作失败'});
				},
				success: function(response) {
					console.log(response);
					var rt = response;
					if(rt.code == 0){
						var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
						parent.layer.close(index);
					}else{
						parent.layer.alert(rt.msg, {title: '操作失败'});
					}
				}
			});
			return false;
		});

		form.on("select(province_list)",function (data) {
			var provinceName = $("#province_list").val();
			initCity(provinceName,"","");
		})

		form.on("select(city_list)",function (data) {
			var cityName = $("#city_list").val();
			initArea(cityName,"");
		})

		/* 监听指定开关
        form.on('switch(component-form-switchTest)', function(data){
          layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
            offset: '6px'
          });
          layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });*/

		init();

		function init() {

			console.log('{{data.detail.province}}');

			var province = $("#province").val();
			var city = $("#city").val();
			var area = $("#area").val();
			var cate_id = $("#cate_id").val();

			initShopCate(cate_id);
			initProvince(province,city,area);

			// if(city){
			// 	initCity(province,city);
			// }
			// if(area){
			// 	initArea(city,area);
			// }

		}
		function initShopCate(cate_id){
			$.ajax({
				type: "Get",
				url : "/admin/ShopCate/getcates",
				async: true,
				error: function(request) {
					parent.layer.alert(JSON.stringify(request), {title: '操作失败'});
				},
				success: function(response) {
					console.log(response);
					var cate_list = $("#cate_list");
					cate_list.empty();
					cate_list.append("<option value=\"0\">请选择分类</option>");
					for(var i =0 ; i < response.data.length;i++){
						if(response.data[i].Id == cate_id){
							cate_list.append("<option value=\""+response.data[i].Id+"\" selected >"+response.data[i].CateName+"</option>");
						}else{
							cate_list.append("<option value=\""+response.data[i].Id+"\">"+response.data[i].CateName+"</option>");
						}
					}
					form.render();
				}
			});
		}
		
		function initProvince(provinceName,cityName,areaName) {
			$.ajax({
				type: "Get",
				url : "/admin/Area/getAreas",
				async: true,
				error: function(request) {
					parent.layer.alert(JSON.stringify(request), {title: '操作失败'});
				},
				success: function(response) {
					console.log(response);
					var area_list = $("#area_list");
					area_list.empty();
					var city_list = $("#city_list");
					city_list.empty();
					var province_list = $("#province_list");
					province_list.empty();
					province_list.append("<option value=\"0\">请选择省份</option>");
					for(var i =0 ; i < response.data.length;i++){
						if(response.data[i].Name == provinceName){
							province_list.append("<option value=\""+response.data[i].Name+"\"  selected >"+response.data[i].Name+"</option>");
						}else{
							province_list.append("<option value=\""+response.data[i].Name+"\">"+response.data[i].Name+"</option>");
						}
					}
					form.render();

					if(provinceName){
						initCity(provinceName,cityName,areaName);
					}
				}
			});
		}

		function initCity(provinceName,cityName,areaName) {
			$.ajax({
				type: "Get",
				url: "/admin/Area/getAreas?areaName=" + provinceName,
				async: true,
				error: function (request) {
					parent.layer.alert(JSON.stringify(request), {title: '操作失败'});
				},
				success: function (response) {
					console.log(response);
					var area_list = $("#area_list");
					area_list.empty();
					var city_list = $("#city_list");
					city_list.empty();
					city_list.append("<option value=\"0\">请选择城市</option>");
					for (var i = 0; i < response.data.length; i++) {
						if(response.data[i].Name == cityName){
							city_list.append("<option value=\"" + response.data[i].Name + "\" selected>"+response.data[i].Name+"</option>");
						}else{
							city_list.append("<option value=\"" + response.data[i].Name + "\">"+response.data[i].Name+"</option>");
						}
					}
					form.render();
					if(cityName){
						initArea(cityName,areaName)
					}
				}
			});
		}
		
		function initArea(cityName,areaName) {
			$.ajax({
				type: "Get",
				url: "/admin/Area/getAreas?areaName=" + cityName,
				async: true,
				error: function (request) {
					parent.layer.alert(JSON.stringify(request), {title: '操作失败'});
				},
				success: function (response) {
					console.log(response);
					var area_list = $("#area_list");
					area_list.empty();
					area_list.append("<option value=\"0\">请选择县/区</option>");
					for (var i = 0; i < response.data.length; i++) {
						if(response.data[i].Name == areaName){
							area_list.append("<option value=\"" + response.data[i].Name + "\" selected>"+response.data[i].Name+"</option>");
						}else{
							area_list.append("<option value=\"" + response.data[i].Name + "\">"+response.data[i].Name+"</option>");
						}
					}
					form.render();
				}
			});
		}
	});

	// 页面返回上一页面
	function goBack(){
		var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
		parent.layer.close(index);
	};





</script>
</body>
</html>















